import React, { Component } from 'react';
import {  BrowserRouter as Router, Route, Link} from 'react-router-dom';
// import {HashRouter as Router, Route, Link} from 'react-router-dom';

import Header from "./components/header.js";
import "./css/base.css";
import Aside from "./components/aside.js";
import Home from "./components/home.js";
import Film from "./components/film.js";
import Cinema from "./components/cinema.js";
import Detail from "./components/detail.js";
import Login from "./components/login.js";
import Mypage from "./components/myPage.js";
// import BackTop from "./components/backTop.js";
import {connect} from "react-redux";

class Apps extends Component {
  render() {
    return (
        <Router>
              <div className="App">
                <Header/>
                {this.props.isToggle?<Aside/>:""}
                <Route exact={true} path="/" component={Home}></Route>
                <Route  path="/film/now_playing" component={Film}></Route>
                <Route  path="/film/will_playing" component={Film}></Route>
                <Route  path="/cinema" component={Cinema}></Route>
                <Route  path="/detail/:id" component={Detail}></Route>
                <Route  path="/login" component={Login}></Route>
                <Route  path="/mypage" component={Mypage}></Route>
                {/*<BackTop/>*/}
              </div>
        </Router>
    );
  }
}

var App = connect(
  function(state, ownProps) {
    return {
      isToggle:state.isToggle
    }
  },
  function(dispatch, ownProps) {
   return {
     
   }
  }
)(Apps);

export default App;
